<template>
  <div>
    <el-tag>当前可用的项目列表:</el-tag>
    <br><br>
    <el-table max-height="500" :data="formData.applicationList" highlight-current-row
              @row-click="rowClusterClick">
      <el-table-column label="项目ID" width="200">
        <template slot-scope="scope">
          <el-radio :label="scope.row.id" v-model="formData.applicationId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="name" min-width="500"/>
      <el-table-column label="备注" prop="remark" min-width="500"/>
    </el-table>
    <br>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="所属项目ID" prop="applicationId">
        <el-input v-model="formData.applicationId" placeholder="请选择所属项目" clearable :style="{width: '100%'}" readonly>
        </el-input>
      </el-form-item>
      <el-form-item label="git项目名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入git项目名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="git地址" prop="url">
        <el-input v-model="formData.url" placeholder="请输入git地址" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="git分支" prop="branches">
        <el-input v-model="formData.branches" placeholder="请输入git分支" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="git账号" prop="username">
        <el-input v-model="formData.username" placeholder="请输入git账号" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="git密码" prop="password">
        <el-input type="password" v-model="formData.password" placeholder="请输入git密码" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="描述信息" prop="description">
        <el-input v-model="formData.description" type="textarea" placeholder="请输入描述信息"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="small">
        <el-button :loading="isSave" type="primary" @click="submitForm">
          <span v-if="!isSave">保存</span>
          <span v-else>正在保存</span>
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {addProject} from "@/api/resource/project";

export default {
  components: {},
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      isSave: false,
      rules: {
        applicationId: [{
          required: true,
          message: '所属项目不能为空',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入git项目名',
          trigger: 'blur'
        }],
        url: [{
          required: true,
          message: '请输入git地址',
          trigger: 'blur'
        }],
        branches: [{
          required: true,
          message: '请输入git分支',
          trigger: 'blur'
        }],
        username: [],
        password: [],
        description: [],
        remark: [],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    rowClusterClick(row) {
      this.formData.applicationId = row.id
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        addProject(this.formData).then(res=>{
          this.$message.success('保存成功！');
          this.$emit('handelSaveOk',false)
        }).catch(err=>{
          this.$message.error(err);
        })
        // TODO 提交表单
      })
    },
    resetForm: function () {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
